/**
* 描述：职位搜索
*/
<style lang="scss" scoped>
  /*@import 'style/style';*/
  @import 'src/styles/vars';
  @import 'src/styles/mixins';
  @import 'src/styles/common';
  @import 'src/styles/index';
  @import 'src/styles/searchFlow';
</style>
<template>
  <div style="margin-bottom:50px;">
    <div class="search-topSearch buleShadow">
      <div class="l-inner" style="margin-top:20px;">
        <!--搜索-->
        <div class="searchKuang">
          <!--<div class="left">-->
              <!--<span class="city">武汉</span>-->
              <!--<i class="icon icon-drop"></i>-->
          <!--</div>-->
          <input type="text" class="searchInput" v-model="searchData.titleLk" placeholder="搜索职位...">
          <a class="btn" @click="clickSearch">搜工作</a>
          <div class="clear"></div>
        </div>
        <!--<div class="hots">-->
            <!--<span>热门城市：</span>-->
            <!--<a>武汉</a><a>北京</a><a>上海</a>-->
        <!--</div>-->
        <!--<div class="hots">-->
          <!--<span>热门搜索：</span>-->
          <!--<a>产品经理</a><a>UI设计</a><a>JAVA</a><a>PHP</a><a>IOS</a>-->
        <!--</div>-->
      </div>
    </div>
    <!--内容-->
    <div class="l-inner">
      <div class="leftMain">
        <div class="select-option">
          <!--<div class="selectOne">-->
            <!--<span class="name">工作地点：</span>-->
            <!--<a class="opt">全国</a>-->
            <!--<a class="opt">北京</a>-->
            <!--<a class="opt">上海</a>-->
            <!--<a class="opt">深圳</a>-->
            <!--<a class="more"><i>更多</i> <b class="icon icon-drop-mini"></b><div class="clear"></div></a>-->
            <!--<div class="clear"></div>-->
          <!--</div>-->
          <div class="selectOne">
            <span class="name">工作经验：</span>
            <a class="opt" :class="searchDataType.experience===null?'cur':''" @click="searchDataType.experience=null">全部</a>
            <a class="opt" :class="searchDataType.experience===0?'cur':''" @click="searchDataType.experience=0">不限</a>
            <a class="opt" :class="searchDataType.experience===1?'cur':''" @click="searchDataType.experience=1">1-3年</a>
            <a class="opt" :class="searchDataType.experience===2?'cur':''" @click="searchDataType.experience=2">3-5年</a>
            <a class="opt" :class="searchDataType.experience===3?'cur':''" @click="searchDataType.experience=3">10年以上</a>
            <div class="clear"></div>
          </div>
          <div class="selectOne">
            <span class="name">学历要求：</span>
            <a class="opt" :class="searchDataType.education===null?'cur':''" @click="searchDataType.education=null">全部</a>
            <a class="opt" :class="searchDataType.education===0?'cur':''" @click="searchDataType.education=0">不限</a>
            <a class="opt" :class="searchDataType.education===1?'cur':''" @click="searchDataType.education=1">大专</a>
            <a class="opt" :class="searchDataType.education===2?'cur':''" @click="searchDataType.education=2">本科</a>
            <a class="opt" :class="searchDataType.education===3?'cur':''" @click="searchDataType.education=3">硕士</a>
            <a class="opt" :class="searchDataType.education===4?'cur':''" @click="searchDataType.education=4">博士</a>
            <div class="clear"></div>
          </div>
          <div class="selectOne">
            <span class="name">行业领域：</span>
            <a class="opt" :class="!searchDataType.industry?'cur':''" @click="searchDataType.industry=null">不限</a>
            <a class="opt" v-for="item in dictionaries.industryList" :class="searchDataType.industry===item.id?'cur':''" @click="searchDataType.industry=item.id">{{item.label}}</a>
            <!--<a class="more"><i>更多</i> <b class="icon icon-drop-mini"></b><div class="clear"></div></a>-->
            <div class="clear"></div>
          </div>
        </div>
        <div class="hrPx2"></div>
        <div class="select-option">
          <div class="selectOne">
            <!--<span class="name">排序方式：</span>-->
            <!--<a class="opt" :class="searchDataType.sort==='id desc'?'cur':''" @click="searchDataType.sort='id desc'">最热</a>-->
            <!--<a class="opt" :class="searchDataType.sort==='salary desc, id desc'?'cur':''" @click="searchDataType.sort='salary desc, id desc'">最新</a>-->
            <span class="name">月薪：</span>
            <el-select class="select" placeholder="请选择" size="mini" v-model="searchDataType.salary">
              <!--<el-option :key="'不限'":label="'不限'":value="'不限'"></el-option>-->
              <el-option v-for="item in salaryList" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
            <!--<span class="nameOther">工作性质：</span>-->
            <!--<el-select class="select" placeholder="请选择" size="mini" v-model="money">-->
              <!--<el-option :key="'不限'":label="'不限'":value="'不限'">-->
              <!--</el-option>-->
            <!--</el-select>-->

            <div class="clear"></div>
          </div>
        </div>
        <!--搜索结果正文-->
        <div class="searchResult buleShadow">
          <div class="one-result" v-for="item in jobList" @click="goToJobDetail(item.id)" style="cursor: pointer">
            <div class="comlogo">
              <img :src="item.companyLogo?`/api/pub/image/${item.companyLogo}`:`/static/images/web/index/companyLogo.jpg`" alt="公司logo" width="100%" height="100%">
            </div>
            <div class="main">
              <div class="jobName" @click="goToJobDetail(item.id)">{{item.title}}</div>
              <div class="jobNAsk"><i>{{item.cityId | cityAndType}}</i><i>|</i>{{item.experience | experience }}<i></i><i>|</i><i>{{item.education | education }}</i></div>
              <div class="jobMoney">{{item.salary | salaryState}}</div>
              <div class="clear"></div>
              <div class="hr"></div>
              <div class="hrInfo">{{item.companyName}}招聘</div>
            </div>
            <div class="clear"></div>
          </div>
        </div>
        <div class="pagePagination">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="searchData.pageNo"
            :page-sizes="[5, 10, 50, 100]"
            :page-size="searchData.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pageCount">
          </el-pagination>
        </div>
      </div>
      <div class="rightMain">
        <div class="block block-jianli buleShadow">
          <div class="inner">
            <i class="icon icon-jianli-max"></i>
            <h5>看上心仪的工作了吗 ？</h5>
            <!--<h5>快来完善简历吧！</h5>-->
            <!--<a class="btn l-button">立即完善</a>-->
            <div class="clear"></div>
          </div>
        </div>
        <!--<div class="block block-history buleShadow">-->
          <!--<div class="title">最近浏览</div>-->
          <!--<div class="hr"></div>-->
          <!--<div class="one-history">-->
            <!--<div class="name">初中级java 工程师</div>-->
            <!--<div class="money">20k-40k</div>-->
            <!--<div class="com"><i>中国平安综合金融集团</i>招聘</div>-->
          <!--</div>-->
        <!--</div>-->
        <div class="block block-ads">
          <img src="/static/images/web/searchFlow/ads01.jpg" alt="广告" width="100%" height="100%">
        </div>
      </div>
      <div class="clear"></div>
    </div>
  </div>
</template>
<script>
  import { queryList, queryCount } from '@/service/web/searchJobsFlow/searchMService';
  import { industry } from '@/service/company/selectService/selectMService';
   export default {
    data () {
      return {
        loading: false,
        money: '不限',
        currentPage4: 1,
        jobList: [],
        pageCount: 0,
        searchData: {
          pageNo: 1,
          pageSize: 5
        },
        searchDataType: {
          hotCity: 0, // 热门城市
          hotSearch: 0, // 热门搜索
          experience: null, // 工作经验
          education: null, // 学历
          industry: null, // 行业
          sort: 'id desc', // 排序方式
          monthlySalary: 0, // 月薪
          workNature: 0 // 工作性质
        },
        dictionaries: { // 字典表集合
          industryList: [] // 行业
        },
        salaryList: [
          {value: null, label: '不限'},
          {value: 0, label: '面议'},
          {value: 1, label: '1000-2000'},
          {value: 2, label: '2000-3000'},
          {value: 3, label: '3000-4000'},
          {value: 4, label: '4000-5000'},
          {value: 5, label: '5000-8000'},
          {value: 6, label: '8000-10000'},
          {value: 7, label: '10000-15000'},
          {value: 8, label: '15000-20000'},
          {value: 9, label: '20000-30000'},
          {value: 10, label: '30000-50000'},
          {value: 11, label: '50000-100000'},
          {value: 12, label: '100000以上'}
        ]
      };
    },
    async mounted () {
      this.getList();
      this.getIndustryList();
      const res = this.$route.query;
      if (res.name) this.searchData.titleLk = res.name;
    },
    methods: {
      clickSearch () {
        this.searchData.pageNo = 1;
        this.getList();
      },
      // 查询列表
      async getList () {
        Object.assign(this.searchData, this.searchDataType);
        this.loading = true;
        let result = await queryList(this.searchData);
        let temp = await queryCount(this.searchData);
        if (!result.data.length) result.data = null;
        this.jobList = result.data || [];
        this.pageCount = temp.data || 0;
        this.loading = false;
        console.log(this.jobList);
      },
      // 当前页改变时
      handleCurrentChange (val) {
        this.searchData.pageNo = val;
        this.getList();
      },
      // pageSize改变时
      handleSizeChange (val) {
        this.searchData.pageSize = val;
        this.getList();
      },
      // 获取行业字典
      async getIndustryList () {
        let result = await industry();
        this.dictionaries.industryList = result.data;
        console.log(this.dictionaries.industryList);
      },
      // 跳转到职务详情
      goToJobDetail (id) {
        this.$router.push({path: '/jobDetail', query: {id: id}});
      }
    },
    watch: {
      'searchDataType.experience' (val) {
        this.clickSearch();
      },
      'searchDataType.education' (val) {
        this.clickSearch();
      },
      'searchDataType.industry' (val) {
        this.clickSearch();
      },
      'searchDataType.sort' (val) {
        this.clickSearch();
      }
    }
  };
</script>
